* {
    margin: 0;
    padding: 0;
}
.chess-list div {
    margin-right: 1px;
    margin-bottom: 1px;
    display: inline-block;
    width: 50px;
    height: 50px;
    position: relative;
    cursor: pointer;
    padding: 0;
    border-radius: 5px;
}
img {
    width: 100%;
    height: 100%;
}
.chess-list {
    font-size: 0;
}
.result {
    min-width: 570px;
}
.pubBtn {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
}
.column {
    border-left: 5px solid #fff6f3;
    margin-top: 10px;
}
.large-title {
    font-size: x-large;
    display: block;
}
.armyPlus {
    margin-top: 15px;
    border: 2px;
    border-bottom-style: dashed;
}
.armyPlus span {
    color: deeppink;
    cursor: pointer;
}
.armyPlus span:hover {
    color: rgb(20, 16, 224);
}

.chess-list button {
    margin-right: 5px;
}
.traits {
    margin-top: 10px;
    border-bottom: 1px solid #fff;
}
.chess-list div {
    background-size: cover;
}

/*羁绊详情面板*/
#group-box {
    border: 1px solid #6f7584;
    background-color: #232937;
    height: 100%;
}
#group-box .type {
    position: relative;
    height: auto;
    min-height: 88px;
    padding: 10px 18px;
    border-bottom: 1px solid #383d4b;
}
/*羁绊图标*/
#group-box .type:before {
    content: "";
    position: absolute;
    top: 15px;
    left: 18px;
    display: block;
    width: 20px;
    height: 20px;
    background-position-y: -20px;
}
#group-box .type p:nth-child(2) {
    line-height: 30px;
    text-indent: 22px;
    font-size: 16px;
    color: #deb762;
    margin-bottom: 1px;
}
#group-box .type p:nth-child(3) {
    font-size: 12px;
    color: #acb0ba;
}
#group-box .content {
    padding: 10px 18px;
}
#group-box .content p {
    margin-bottom: 1px;
}
#group-box .content span:nth-child(1) {
    vertical-align: top;
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 22px;
    margin-right: 10px;
    text-indent: 0;
    text-align: center;
    border: 1px solid #acb0ba;
    border-radius: 50%;
    font-size: 12px;
    color: #acb0ba;
}
#group-box .content span {
    margin: 1px 0;
}
#group-box .content span:nth-child(2) {
    vertical-align: top;
    display: inline-block;
    width: 270px;
    height: auto;
    line-height: 22px;
    font-size: 12px;
    color: #acb0ba;
}

/*英雄简介*/
#hero-box {
    border: 1px solid #6f7584;
    background-color: #232937;
    height: 100%;
}
#hero-box .details {
    width: 100%;
    padding-top: 10px;
}
#hero-box .details div {
    vertical-align: top;
    display: inline-block;
    width: 58px;
    height: 58px;
    margin: 0px 10px 0px 15px;
}
#hero-box .details p {
    vertical-align: top;
    display: inline-block;
    width: 180px;
    height: 58px;
}
#hero-box .details p span:nth-child(1) {
    display: block;
    width: 100%;
    height: 34px;
    line-height: 34px;
    font-size: 20px;
    font-weight: bold;
    color: #deb762;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#hero-box .details p span:nth-child(2) {
    display: block;
    width: 100%;
    height: 30px;
    line-height: 34px;
    font-size: 14px;
    font-weight: bold;
    color: #025cff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#hero-box .details p span:nth-child(3) {
    display: block;
    width: 100%;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    color: #7a7e87;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#hero-box .title {
    position: relative;
    width: 100%;
    height: 30px;
    line-height: 15px;
    text-indent: 15px;
    font-weight: bold;
    font-size: 16px;
    color: #deb762;
}
#hero-box .title:after {
    content: "";
    position: absolute;
    bottom: -4px;
    right: 0px;
    width: 330px;
    height: 9px;
    background: url(//game.gtimg.cn/images/lol/guides/tft/cut2.png) no-repeat;
}
#hero-box .recommend .champions {
    margin-left: 15px;
    font-size: 0;
}
.weaponBox {
    vertical-align: top;
    display: inline-block;
    width: 34px;
    height: 34px;
    padding: 1px;
    margin: 5px 15px 5px 0;
    border: 1px solid #826a2a;
}
#hero-box .skill .info {
    margin: 0px 0 0px 15px;
}
#hero-box .skill .info img {
    vertical-align: top;
    display: inline-block;
    width: 44px;
    height: 44px;
    margin-right: 10px;
}
#hero-box .skill .name {
    vertical-align: top;
    display: inline-block;
    width: 260px;
    height: 23px;
}
#hero-box .skill .name span:nth-child(1) {
    display: block;
    width: 100%;
    height: 24px;
    line-height: 24px;
    font-size: 16px;
    color: #deb762;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#hero-box .skill .name span:nth-child(2) {
    display: block;
    width: 100%;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    color: #acb0ba;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#hero-box .skill .description {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding-bottom: 10px;
    padding-right: 40px;
    font-size: 12px;
    color: #acb0ba;
}

/*装备简介*/
#weapon-box {
    border: 1px solid #6f7584;
    background-color: #232937;
    height: 100%;
    padding: 10px;
}
#weapon-box .title {
    position: relative;
    width: 100%;
    height: 30px;
    line-height: 15px;
    text-indent: 15px;
    font-weight: bold;
    font-size: 16px;
    color: #deb762;
}
#weapon-box .title:after {
    content: "";
    position: absolute;
    bottom: -4px;
    right: 0px;
    width: 330px;
    height: 9px;
    background: url(//game.gtimg.cn/images/lol/guides/tft/cut2.png) no-repeat;
}

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
/*羁绊筛选按钮*/
.btn-choose {
    background: url(//game.gtimg.cn/images/lol/act/a20191029tftset2/icon-bg.png)
        no-repeat;
    width: 58px;
    height: 100px;
    display: inline-block;
    margin: 0 5px;
}
.btn-choose.on {
    background: url(//game.gtimg.cn/images/lol/act/a20191029tftset2/icon-bgon.png)
        no-repeat;
    width: 58px;
    height: 98px;
    display: inline-block;
}
.btn-choose i {
    width: 58px;
    height: 58px;
    display: block;
}
.btn-choose span.group_span {
    margin: 15px 0px 0px 14px;
}
.btn-choose span.group_name {
    margin-top: 13px;
    font-size: 12px;
    display: block;
    text-align: center;
    color: #a87946;
}

/*羁绊小图标*/
.result-jiban {
    min-width: 570px;
}
.btn-choose {
    overflow: hidden;
}
.group_span {
    width: 30px;
    height: 30px;
    overflow: hidden;
    position: relative;
    display: inline-block;
}
.group_span_img {
    width: 30px;
    height: 30px;
    filter: drop-shadow(#a97b16 30px 0);
    -webkit-filter: drop-shadow(#a97b16 30px 0);
    left: -30px;
    position: absolute;
}
.result-jiban > div {
    vertical-align: top;
    display: inline-block;
    position: relative;
    width: auto;
    min-width: 70px;
    height: 32px;
    margin: 2px 10px 2px 3px;
}
.result-jiban > div > img {
    position: absolute;
    top: 7px;
    left: 5px;
    width: 16px;
    height: 16px;
    z-index: 1;
}
.result-jiban > div > span {
    position: relative;
    display: inline-block;
    min-width: 58px;
    height: 20px;
    line-height: 20px;
    padding: 0 6px 0 16px;
    margin: 4px 0 4px 12px;
    text-align: center;
    font-size: 12px;
    color: #000;
}

/* .traits em.choose:before{content: '';width: 36px;height: 43px;background: url(//game.gtimg.cn/images/lol/act/a20200917tftset4/choosed.png) no-repeat;background-size: 100% 100%;position: absolute;top: -5px;left: -5px;display:block;filter: brightness(1.5);transform: scale(0.96);} */
.grade1{background:url(//game.gtimg.cn/images/lol/act/a20200917tftset4/spr-label-3.png) no-repeat;background-position:0 -105px;}
.grade2{background:url(//game.gtimg.cn/images/lol/act/a20200917tftset4/spr-label-3.png) no-repeat;background-position:0 -70px;}
.grade3{background:url(//game.gtimg.cn/images/lol/act/a20200917tftset4/spr-label-3.png) no-repeat;background-position:0 -35px;}
.grade4{background:url(//game.gtimg.cn/images/lol/act/a20200917tftset4/spr-label-3.png) no-repeat;background-position:0 0;}

/* .choose:before {
    content: '';
    width: 30px;
    height: 36px;
    background: url(//game.gtimg.cn/images/lol/act/a20200917tftset4/choosed.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: -2px;
    left: -2px;
    display: block;
    filter: brightness(1.5);
    transform: scale(0.96);
} */

/*
var data = '';
chess.data.forEach((item, index) => {
data = data + ".hi_"+item.TFTID+" {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/"+item.name+");}\n";
});
console.log(data);
*/
/*英雄头像*/
.hi_292 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/292.png);}
.hi_323 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/323.png);}
.hi_287 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/287.png);}
.hi_308 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/308.png);}
.hi_311 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/311.png);}
.hi_314 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/314.png);}
.hi_325 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/325.png);}
.hi_303 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/303.png);}
.hi_273 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/273.png);}
.hi_283 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/283.png);}
.hi_299 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/299.png);}
.hi_285 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/285.png);}
.hi_313 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/313.png);}
.hi_316 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/316.png);}
.hi_286 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/286.png);}
.hi_302 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/302.png);}
.hi_298 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/298.png);}
.hi_274 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/274.png);}
.hi_293 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/293.png);}
.hi_319 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/319.png);}
.hi_281 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/281.png);}
.hi_305 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/305.png);}
.hi_301 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/301.png);}
.hi_317 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/317.png);}
.hi_279 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/279.png);}
.hi_304 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/304.png);}
.hi_288 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/288.png);}
.hi_278 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/278.png);}
.hi_294 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/294.png);}
.hi_307 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/307.png);}
.hi_297 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/297.png);}
.hi_324 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/324.png);}
.hi_318 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/318.png);}
.hi_300 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/300.png);}
.hi_322 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/322.png);}
.hi_309 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/309.png);}
.hi_327 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/327.png);}
.hi_296 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/296.png);}
.hi_277 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/277.png);}
.hi_280 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/280.png);}
.hi_289 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/289.png);}
.hi_275 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/275.png);}
.hi_295 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/295.png);}
.hi_276 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/276.png);}
.hi_312 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/312.png);}
.hi_328 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/328.png);}
.hi_326 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/326.png);}
.hi_320 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/320.png);}
.hi_290 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/290.png);}
.hi_321 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/321.png);}
.hi_291 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/291.png);}
.hi_271 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/271.png);}
.hi_315 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/315.png);}
.hi_282 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/282.png);}
.hi_284 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/284.png);}
.hi_272 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/272.png);}
.hi_306 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/306.png);}
.hi_310 {background: url(//game.gtimg.cn/images/lol/act/img/tft/champions/310.png);}


/*
版本提示
*/
.version{
    color: floralwhite;
    border-radius: 5px;
    background-color: darkgray;
    padding: 2px;
    width: 300px;
}